<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="my-element" style="position: relative;width: 100px;height: 100px;background-color: red;"></div>
    <script>
        function animate() {
            // 获取元素并设置样式
            const elem = document.getElementById('my-element');
            elem.style.left = elem.offsetLeft + 1 + 'px';

            // 检查元素是否已经到达屏幕边缘
            if (elem.offsetLeft >= window.innerWidth - elem.offsetWidth) {
                // 如果到达边缘，重置元素位置
                elem.style.left = 0;
            }

            // 请求下一帧动画
            requestAnimationFrame(animate);
            // setTimeout(() => {
            //     animate()
            // }, 0);
        }
        // animate()

        // 开始动画
        requestAnimationFrame(animate);

    </script>
</body>

</html>